<template>        
    <div class="verify-card">
        <el-divider>
        </el-divider>
        <el-badge :value="12" class="item">
            <el-button @click="showFriend=true">好友申请</el-button>
         </el-badge>
        <el-badge :value="3" class="item">
            <el-button>入群申请</el-button>
        </el-badge>
        <el-badge :value="1" class="item" type="primary">
            <el-button>权限申请</el-button>
        </el-badge>
        <el-badge :value="2" class="item" type="warning">
            <el-button>群申请</el-button>
        </el-badge>
        <el-badge :value="1" class="item" color="green">
            <el-button>群申请</el-button>
        </el-badge>

        <el-drawer v-model="showFriend" title="好友申请" class="showFriend-wrapper">
            <el-table :data="tableData" style="width: 100%" :header-cell-style="{textAlign:'center'}">
                
                <el-table-column label="用户名" width="100"  align="center" prop="name">
                    <template #default="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="头像" width="100" prop="avatar">
                    <template #default="scope">
                        <span style="display: inline-block;">
                            <img :src="scope.row.avatar" width="30px" height="30px">
                        </span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180"  align="center">
                    <template #default="scope">
                        <el-button 
                            @click="handleEdit(scope.$index, scope.row)"
                            size="small"
                            type="success"
                        >
                            同意
                        </el-button>
                        <el-button
                            @click="handleDelete(scope.$index, scope.row)"
                            size="small"
                            type="danger"
                        >
                            忽略
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <div class="el-pagination-wrapper">
                <el-pagination
                    size="small"
                    background
                    layout="prev, pager, next"
                    :total="50"
                    class="mt-4"
                    :page-size="2"
                    @size-change="pageChange(curretgPage)"
                    @current-change="pageChange(curretgPage)"
                    v-model:current-page="curretgPage"
                />
            </div>


        </el-drawer>


    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import { Timer } from '@element-plus/icons-vue'
const props = defineProps({
    personInfo:{}
})

const showFriend = ref(false)

const tableData = ref([
    {
        name: '张三',
        avatar:"https://avatars.githubusercontent.com/u/44761321?v=4&size=64",
        id: '44761321',
    },
    {
        name: '李四',
        avatar:"https://avatars.githubusercontent.com/u/30518686?v=4&size=64",
        id: '30518686',
    },
])

// ========================= 页码切换 ========================================
const curretgPage = ref(1)

const pageChange = (pageNum)=> {
    console.log("页码改变", pageNum);
    if(pageNum % 2 == 0) {
        tableData.value = [
            {
                name: 'Twiliness',
                avatar:"https://avatars.githubusercontent.com/u/10475770?v=4&size=64",
                id: '10475770',
            },
            {
                name: 'Yong',
                avatar:"https://avatars.githubusercontent.com/u/30883395?v=4&size=64",
                id: '30883395',
            },
        ]
    }else{
        tableData.value = [
                {
                    name: '张三',
                    avatar:"https://avatars.githubusercontent.com/u/44761321?v=4&size=64",
                    id: '44761321',
                },
                {
                    name: '李四',
                    avatar:"https://avatars.githubusercontent.com/u/30518686?v=4&size=64",
                    id: '30518686',
                },
        ]
    }
}

</script>

<style scoped lang="scss">
.verify-card {
    height: 100%;
    padding-top: 20px;
    .item {
        margin-left: 20px;
    }
    .showFriend-wrapper {
        .el-table :deep(.cell) {
            display: flex;
                justify-content: center;
        }
        .el-pagination-wrapper {
            margin-top: 20px;
        }
    }
}

</style>